<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>form向服务器提交数据</title>
	<script type="text/javascript">
	function submitData(){

		var form = document.getElementById('form1');
		var formData = new FormData(form);

		var xhr = new XMLHttpRequest();
		xhr.open('post', 'index.html', true);
		xhr.onload = function(e){
			if(this.status == 200){
				document.getElementById('result').innerHTML = this.response;
			}
		};
		xhr.send(formData);
	}
	</script>
</head>

<body>
	<form id="form1">
		<!-- name为_method, 控件值为put 的隐藏控件的使用， 虽然客户端提交使用post
		但已为服务器端的bodyParser中间件头功了一个伪put方法 -->
		<input type="hidden" name="_method" value="put">
		姓名：<input type="text" name="name" id="name" value="璇"><br/>
		性别：<input type="text" name="sex" id="sex" value="F"><br/>
		<input type="button" value="提交" onclick="submitData();">
	</form>
	<output id="result"></output>
</body>

</html>